<template>
        <!-- /.u-menu -->
        <div class="u-main">
          <div class="ucenter" >
            <div class="ucenter-info mt10" style="height: 300px">
              <div class="info-title">
                <h5>
                  我的个人主页</h5>
              </div>
              <div  STYLE="margin: 20px auto;float: left">
                <ul class="info-img">
                  <li>
                    <img src="../../assets/usercss/images/tx_img.gif" class="avatar" /></li></ul>
                <div class="info-main">
                  <div class="row"><label>用户名：</label>{{myuserInfo.userName}}</div>
                  <div class="row"><label>注册时间：</label>{{$moment(myuserInfo.registertime).format('YYYY-MM-DD')}}</div>
                  <div class="row"><label>邮箱：</label>{{myuserInfo.eamil}}</div>
                  <div class="row"><label>用户积分：</label><span class="orange">鸿运 &nbsp;&nbsp; {{myuserInfo.intergal}}</span></div>
                  <div class="row">
                    <label>个人统计：</label><span class="orange">{{myuserInfo.loansDoce}}</span>&nbsp;条贷款记录 ， 共计&nbsp;<span class="orange">{{myuserInfo.loansMoney}}</span>&nbsp;万元
                    ； <span class="orange">{{myuserInfo.invesDoce}}</span>&nbsp;条投标记录 ， 共计&nbsp;<span class="orange">{{myuserInfo.invesMoney}}</span>&nbsp;元
                    。
                  </div>
                </div>
                <div class="clear"></div>
              </div>
            </div>
            <div class="ucenter-info mt10" >
              <div class="ucenter-tab-box" style="margin: 0 auto">
                <ul class="u-tab clearfix">
                  <li style="margin-left: 110px" :class="{current:(model==1)}"><a href="javascript:void(0)" @click="changeModel(1)">资金记录</a></li>
                  <li :class="{current:(model==2)}"><a href="javascript:void(0)" @click="changeModel(2)" >投资记录</a></li>
                </ul>
              </div>
              <div id="tab_box">
                <div class="u-form-wrap" v-show="model==1">
                    <!--<el-table-->
                      <!--:data="userMoney"-->
                      <!--stripe-->
                      <!--style="width: 100%">-->
                      <!--<el-table-column-->
                        <!--prop="zongPaytime"-->
                        <!--label="交易时间"-->
                        <!--width="180">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="zongPaytype"-->
                        <!--label="交易类型"-->
                        <!--width="180">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="zongPaymoney"-->
                        <!--label="交易金额(万元)">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="zongPayservice"-->
                        <!--label="手续费(元)">-->
                      <!--</el-table-column>-->
                    <!--</el-table>-->

                  <table class="u-table">
                    <tr>
                      <th width="25%">交易时间</th>
                      <th width="25%">交易类型</th>
                      <th width="25%">交易金额(万元)</th>
                      <th width="25%">手续费(元)</th>
                    </tr>
                    <tr v-for="money in userMoney">

                      <td>{{$moment(money.zongPaytime).format('YYYY-MM-DD')}}</td>
                      <td>{{money.zongPaytype}}</td>
                      <td>{{money.zongPaymoney}}</td>
                      <td>{{money.zongPayservice}}</td>
                    </tr>
                  </table>
                  <div style="margin-top: -30px;margin-bottom: -50px">
                    <p class="notic_pagelink">
                      <span v-for="i in userMoneypageInfo.pages">
                        <a href="javascript:;" @click="selectUserMoney(i)" :class="{notic_acur:(activeNum==i)}">{{i}}</a>
                      </span>
                    </p>
                  </div>
                </div>

                <div class="u-form-wrap" v-show="model==2">
                    <!--<el-table-->
                      <!--:data="userInvest"-->
                      <!--stripe-->
                      <!--style="width: 100%">-->
                      <!--<el-table-column-->
                        <!--prop="payTime"-->
                        <!--label="交易时间"-->
                        <!--width="180">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="investName"-->
                        <!--label="投资项目"-->
                        <!--width="180">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="investMoney"-->
                        <!--label="交易金额(元)">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="type"-->
                        <!--label="方式">-->
                      <!--</el-table-column>-->
                      <!--<el-table-column-->
                        <!--prop="getMoney"-->
                        <!--label="我的收益">-->
                      <!--</el-table-column>-->
                    <!--</el-table>-->
                  <table class="u-table">
                    <tr>
                      <th width="20%">交易时间</th>
                      <th width="20%">投资项目</th>
                      <th width="20%">交易金额(元)</th>
                      <th width="20%">方式</th>
                      <th width="20%">我的收益</th>
                    </tr>
                    <tr v-for="myInvest in userInvest">
                      <td>{{$moment(myInvest.payTime).format('YYYY-MM-DD')}}</td>
                      <td>{{myInvest.investName}}</td>
                      <td>{{myInvest.investMoney}}</td>
                      <td>{{myInvest.type}}</td>
                      <td>{{myInvest.getMoney}}</td>
                    </tr>
                  </table>
                  <div class="block">
                    <span class="demonstration"></span>
                    <!--<el-pagination-->
                      <!--@size-change="handleSizeChange"-->
                      <!--@current-change="handleCurrentChange"-->
                      <!--:current-page="currentPage4"-->
                      <!--:page-sizes="[100, 200, 300, 400]"-->
                      <!--:page-size="100"-->
                      <!--layout="total, sizes, prev, pager, next, jumper"-->
                      <!--:total="400">-->
                    <!--</el-pagination>-->
                    <div style="margin-top: -30px;margin-bottom: -50px">
                      <p class="notic_pagelink">
                      <span v-for="i in userInvestpageInfo.pages">
                        <a href="javascript:;" @click="selectUserInvest(i)" :class="{notic_acur:(investActiveNum==i)}">{{i}}</a>
                      </span>
                      </p>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!-- /.u-main -->
        </div>
</template>

<script src="../../assets/usercss/js/ops.js" type="text/javascript"></script>
<script src="../../assets/usercss/js/UserJS.js" type="text/javascript"></script>

<script>
    export default {
        name: "index",
      data(){
        return{
          myuserInfo:{userName:"",registertime:"",eamil:"",intergal:"",loansDoce:"",loansMoney:"",invesDoce:"",invesMoney:""},
          userMoney:{zongPaytime:"",zongPaytype:"",zongPaymoney:"",zongPayservice:""},
          userInvest:{payTime:"",investName:"",investMoney:"",type:"",getMoney:""},
          model:1,
          userMoneypageInfo:[],
          userInvestpageInfo:[],
          activeNum:1,
          investActiveNum:1
        }
      },
      methods:{
        changeModel: function (i) {
          this.model=i
        },
        selectUserMoney:function (i) {
          this.axios.post("/api/userHomePageController/getuserZong",{pageNum:i}).then(data=>{
            console.log(data.data)
            this.activeNum=i
            this.userMoney=data.data.list
            this.userMoneypageInfo=data.data
          })
        },
        selectUserInvest:function (i) {

          this.investActiveNum=i
          this.axios.post("/api/userHomePageController/getUserInvestVo",{pageNum:i}).then(data=>{
            this.userInvest=data.data.list
            this.userInvestpageInfo=data.data
          })
        }
      },
      created() {
        this.axios.get("/api/userHomePageController/getSelfInfo",{}).then(data=>{
          this.myuserInfo=data.data
        }).catch((error) => {
          console.log(error)
        })
        this.axios.post("/api/userHomePageController/getuserZong",{pageNum:1}).then(data=>{
          this.userMoney=data.data.list
          this.userMoneypageInfo=data.data
        }).catch((error) => {
          console.log(error)
        })
        this.axios.post("/api/userHomePageController/getUserInvestVo",{pageNum:1}).then(data=>{
          this.userInvest=data.data.list
          this.userInvestpageInfo=data.data
        }).catch((error) => {
          console.log(error)
        })
      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
